<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计划执行结果</title>
    <script src="../../static/bootstrap5.0.1/bootstrap5/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="../../static/bootstrap5.0.1/bootstrap5/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/layuiadmin/style/admin.css" media="all">
    <script src="../../static/layuiadmin/layui/layui.js"></script>
    <link rel="stylesheet" href="../../static/css/common.css">
    <style>
        .bx {
            margin-left: 50px;
            margin-top: 50px;
        }

        .layui-table-cell {
            height: 40px;
            line-height: 40px;
        }

        .layui-input-block {
            margin-left: 150px;
            min-height: 36px;
        }
    </style>
</head>
<body>
<div class="layui-form">
    <div class="layui-inline tp">
        <div class="layui-form-item" style="margin-left: -110px;">
            <div class="layui-input-block">
                <select id="plan_name">
                    <option value="">请选择执行计划</option>
                    {% for key, val in plan_dic.items()%}
                    <option value="{{key}}">{{val}}</option>
                    {% endfor %}
                </select>
                <!--                <input type="text" name="title" required lay-verify="required" placeholder="请输入计划名称"-->
                <!--                       autocomplete="off" class="layui-input" id="plan_name">-->
            </div>
        </div>
    </div>
    <!--    <div class="layui-inline">-->
    <!--        <label class="layui-form-label" style="width: auto;">日志创建时间</label>-->
    <!--        <div class="layui-input-inline">-->
    <!--            <input type="text" name="date" id="log_date_search" lay-verify="date" placeholder="yyyy-MM"-->
    <!--                   autocomplete="off"-->
    <!--                   class="layui-input">-->
    <!--        </div>-->
    <!--    </div>-->
    <div class="layui-inline tp1">
        <div class="layui-form-item">
            <button id="searchconfig" class="btn btn-primary">搜索</button>
            <button id="export" class="btn btn-danger">导出</button>
        </div>
    </div>
    <div id="show_table" lay-filter="show_table">
    </div>
</div>
<div id="addwl" style="display: none;">
    <div class="layui-form tp">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto;">资产类型名称</label>
            <div class="layui-input-block" style="width: 250px;">
                <input type="text" id="zc_name" name="zc_name" lay-verify="required" placeholder="请输入资产类型名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>
</div>
<div style="display: none;" id="show_bind_msg">
    <div id="bind_table" lay-filter="bind_table"></div>
</div>
</body>
<script type="text/html" id="operator">
    <!--    <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</button>-->
    <!--    <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="execute">查看绑定条件</button>-->
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
</script>
<script>
    layui.use(["table", "jquery", "layer", "laydate"], function () {
            var table = layui.table;
            var $ = layui.jquery;
            var layer = layui.layer;
            let laydate = layui.laydate;
            laydate.render({
                elem: "#log_date_search",
                value: new Date(),
                format: "yyyy-MM",
                type: 'month'
            })
            tableRender({
                "plan_id": $("#plan_name").val()
            });

            function tableRender(param) {
                //获取表头
                let headers = []
                headers[0] = {type: 'checkbox', fixed: 'left'}
                let fin_headers = []
                $.post("/api/plan/get_header", param, function (res) {
                    for (let i = 0; i < res.length; i++) {
                        headers[headers.length] = {
                            field: res[i]["key"],
                            title: res[i]["val"],
                            width: 200,
                            align: "center",
                            style: 'background-color:white;color:gray;opacity:0.9;',
                            sort: true,
                            totalRowText: res[i]["totalRowText"]
                        }
                    }
                    fin_headers[fin_headers.length] = headers;
                    table.render({
                        elem: "#show_table",
                        method: "post",
                        url: "/api/plan/get_plan_result_list",
                        where: param,
                        totalRow: true, // 开启合计行
                        page: true,
                        limit: 8,
                        limits: [8, 10, 20, 30],
                        cols: fin_headers
                    })
                })
            }

            // 监听checkbox的点击事件
            table.on('checkbox(show_table)', function (obj) {
                let tr = obj.tr; // 获取当前行
                if (obj.checked) {
                    // 如果checkbox被选中，设置背景色
                    $(tr).css('background-color', 'green'); // 根据需要设置选中时的背景色
                } else {
                    // 如果checkbox被取消选中，恢复背景色
                    $(tr).css('background-color', ''); // 恢复默认背景色
                }
            });

            table.on('tool(show_table)', function (obj) {
                let row_data = obj.data;
                if (obj.event === 'del') {
                    let param = {
                        id: row_data["id"]
                    }
                    $.post("/api/material/del", param, function (res) {
                        if (res.code === 200) {
                            layer.msg(res.msg, {icon: 6, time: 1500}, function () {
                                tableRender(null)
                                layer.close(idx);
                            })
                        } else {
                            layer.msg(res.msg, {icon: 6, time: 1500}, function () {
                                // tableRender(null)
                            })
                        }
                    })
                }
                if (obj.event === 'execute') {

                    //新增
                    let open_index = layer.open({
                        type: 1,
                        content: $('#show_bind_msg'),
                        title: '组织绑定信息',
                        area: ['1000px', '400px'],
                        btn: ['确定', '取消'],
                        yes: function (index, layerout) {

                        },
                        btn2: function (index, layer) {

                        },
                        closeBtn: function (index, layer) {

                        },
                        success: function () {
                            table.render({
                                elem: "#bind_table",
                                method: "post",
                                url: "/order/get_bind_msg",
                                where: row_data,
                                page: true,
                                limit: 8,
                                limits: [8, 10, 20, 30],
                                cols: [[
                                    {
                                        field: "org_name",
                                        title: "组织名称",
                                        align: "center",
                                        width: 150,
                                        style: 'background-color:white;color:gray;opacity:0.9;'
                                    },
                                    {
                                        field: "lx",
                                        title: "条件类型",
                                        align: "center",
                                        width: 120,
                                        style: 'background-color:white;color:gray;opacity:0.9;'
                                    },
                                    {
                                        field: "filter_type",
                                        title: "条件符号",
                                        align: "center",
                                        width: 100,
                                        style: 'background-color:white;color:gray;opacity:0.9;'
                                    },
                                    {
                                        field: "filter_value",
                                        title: "条件值",
                                        align: "center",
                                        style: 'background-color:white;color:gray;opacity:0.9;'
                                    },
                                    {
                                        field: "bind_id",
                                        title: "所属分组编号",
                                        align: "center",
                                        style: 'background-color:white;color:gray;opacity:0.9;'
                                    },
                                ]]
                            })
                            // $.post("/order/get_bind_msg", row_data, function (res) {
                            //     if (res.code === 200) {
                            //
                            //     } else {
                            //         layer.msg(res.msg, {icon: 2, time: 1500}, function () {
                            //             tableRender(null)
                            //         })
                            //     }
                            // })
                        }
                    })
                }
            })

            $("#searchconfig").click(function () {
                search_func();
            })

            function search_func() {
                let plan_id = $("#plan_name").val()
                tableRender({
                    "plan_id": plan_id
                });
            }

            $('#order_no_search').bind('keypress', function (event) {
                if (event.keyCode === 13) {
                    search_func();
                }
            })

            function getParams() {
                return {
                    "plan_id": $("#plan_name").val()
                }
            }

            $("#export").click(function () {
                let param = getParams();
                // $.get('/pre_result_api/export_hz', param, function (res) {
                //     if (res.code === 200) {
                //         window.location.href = res["download_url"];
                //     } else {
                //         layer.msg(res.msg, {icon: 2, time: 3000}, function () {
                //         })
                //     }
                // })

                function loadingform(message) {
                    // loading = parent.layer.load(2, {
                    loading = layer.load(2, {
                        shade: [0.3, '#fff'],
                        content: message,
                        success: function (layerContentStyle) { // 设置loading样式
                            layerContentStyle.find('.layui-layer-content').css({
                                'padding-left': '45px',
                                'text-align': 'left',
                                'width': '250px',
                                'line-height': '30px'
                            });
                        }
                    })
                }

                function doAjax_FileDownload(url, param, callback) {

                    // 构造XMLHttpRequest对象
                    let xmlRequest = new XMLHttpRequest();
                    // 发送get请求
                    xmlRequest.open("POST", url, true);
                    // 设置响应类型
                    xmlRequest.responseType = "blob";
                    // 发送请求
                    xmlRequest.send(JSON.stringify(param));

                    // 请求获得响应之后,触发下面的回调函数
                    xmlRequest.onload = function (oEvent) {
                        // 当时满足下面的状态码的时候,视为下载成功
                        if ((xmlRequest.status >= 200 && xmlRequest.status < 300) || xmlRequest.status === 304) {

                            // 从xmlRequest对象中获取响应的内容
                            let content = xmlRequest.response;

                            /*
                                从xmlRequest的响应头中获取文件名字符串
                                因为我们将文件以流的形式返回前端,返回的文件没有文件名
                                因此在后端处理的时候,我们将文件名放到响应头中
                                然后在前端从响应头中获取文件名
                            */
                            let dispositionStr = xmlRequest.getResponseHeader('content-disposition');
                            if (dispositionStr == null || dispositionStr === "") {
                                alert("下载失败!");
                                return;
                            }

                            // 获取文件名
                            let dispositionArr = dispositionStr.split("=");
                            // 我们的文件名可能含有汉字,因此在后端进行了UTF-8编码处理,此处进行解码
                            let fileName = decodeURIComponent(dispositionArr[1]);

                            // 利用response的响应内容构造一个Blob对象(通过Blob对象进行下载)
                            let blob = new Blob([content]);

                            // 创建一个隐藏的用来下载文件的a标签
                            let elink = document.createElement('a');
                            elink.download = fileName;
                            elink.style.display = 'none';

                            /*
                                将blob文件对象转换为内存中对象,并将生成的对象赋给隐藏的a标签
                                bolb对象会暂时存储在客户端的内存中,
                                使用URL.createObjectURL()方法可以创建指向内存文件对象的临时url
                                使用createObjectURL可以节省性能并更快速,只不过需要在不使用的情况下手动释放内存
                                FileReader.readAsDataURL返回文件的base64字符串，比blob url消耗更多内存，但是在不用的时候会自动从内存中清除（通过垃圾回收机制）
                            */
                            const src = URL.createObjectURL(blob);
                            elink.href = src;
                            document.body.appendChild(elink);

                            // 模拟点击下载事件,进行下载
                            elink.click();

                            // 点击之后,移除我们定义的隐藏a标签
                            document.body.removeChild(elink);

                            // 移除文件对象
                            URL.revokeObjectURL(src)
                        }
                    }
                }

                let idx = layer.confirm('确定要导出结果到excel表格?', function (index) {
                    loadingform('正在生成excel文件,请稍等...')
                    let param = getParams();
                    // parent.layer.close(idx);
                    // layer.closeAll();
                    $.post('/api/plan/export_result', param, function (res) {
                        // layer.close(loading)
                        // layer.closeAll(2);
                        let cls = "layui-layer layui-layer-loading"
                        $(".layui-layer").remove()
                        $(".layui-layer-shade").remove()
                        let down_param = {}
                        if (res.code === 200) {
                            let download_param = {
                                file_name: res.data.file_name,
                                export_name: res.data.export_name
                            }
                            layer.open({
                                type: 1
                                , id: 'layerDemo_export' //防止重复弹出
                                , content: '<div style="padding: 20px 100px;">' + res.msg + '</div>'
                                , btn: '下载文件'
                                , btnAlign: 'c' //按钮居中
                                , shade: 0 //不显示遮罩
                                , yes: function () {
                                    doAjax_FileDownload('/api/download/download_file', download_param, null)
                                    layer.closeAll()
                                }
                            });
                        } else {
                            layer.msg(res.msg, {icon: 2, time: 1500})
                        }
                    })
                });
            })
        }
    )


</script>
</html>